<template>
    <div>
        <quill-editor v-model="content"
                      ref="myTextEditor"
                      :options="editorOption"
                      @change="onChange">
            <div id="toolbar" slot="toolbar">
                <select class="ql-size">
                    <option value="small"></option>
                    <option selected></option>
                    <option value="large"></option>
                    <option value="huge"></option>
                </select>
                <span class="ql-formats"><button class="ql-script" value="sub"></button></span>
                <span class="ql-formats"><button class="ql-script" value="super"></button></span>
                <span class="ql-formats"><button type="button" class="ql-bold"></button></span>
                <span class="ql-formats"><button type="button" class="ql-italic"></button></span>
                <span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
                <span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
                <span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
                <span class="ql-formats"><button type="button" class="ql-link"></button></span>
                <span class="ql-formats">
                    <button type="button" @click="imgClick" style="outline:none">
                        <svg viewBox="0 0 18 18">
                            <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
                            <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
                            <polyline class="ql-even ql-fill"
                                      points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
                        </svg>
                    </button>
                </span>
                <span class="ql-formats">
                    <button type="button" class="ql-video"></button>
                </span>
            </div>
        </quill-editor>
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    import { mapActions } from 'vuex'

    export default {
        name: 'postEditor',
        components: {
            quillEditor
        },
        props: {
            value: {
                type: String
            },
            maxUploadSize: {
                type: Number,
                default: 1024 * 1024 * 3
            }
        },
        data () {
            return {
                content: '',
                editorOption: {
                    modules: {
                        toolbar: '#toolbar'
                    }
                }
            }
        },
        methods: {
            ...mapActions('file', {
                uploadFileAction: 'uploadFile'
            }),
            onChange () {
                this.$emit('input', this.content)
            },
            onFileChange (e) {
                let fileInput = e.target
                if (fileInput.files.length === 0) {
                    return
                }
                this.editor.focus()
                if (fileInput.files[0].size > this.maxUploadSize) {
                    this.$alert(`图片不能大于${this.maxUploadSize / 1024 / 1024}MB`, '图片尺寸过大', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    })
                } else {
                    this.action(this.uploadFileAction(fileInput.files[0]), data => {
                        this.editor.insertEmbed(this.editor.getSelection().index, 'image', data, { width: '100%' })
                    })
                }
            },
            imgClick () {
                let input = document.createElement('input')
                input.type = 'file'
                input.name = 'file'
                input.accept = 'image/jpeg,image/png,image/jpg,image/gif'
                input.onchange = this.onFileChange
                input.click()
            }
        },
        computed: {
            editor () {
                return this.$refs.myTextEditor.quill
            }
        },
        mounted () {
            this.content = this.value
        },
        watch: {
            'value' (newVal, oldVal) {
                if (this.editor) {
                    if (newVal !== this.content) {
                        this.content = newVal
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>
